<template>
	<div v-if="dataInfo">
		<view class="wrap paddingBottom" v-if="dataInfo">
			<view class="wrap-info">
				<view class="wrap-title">
					{{ dataInfo.title }}
				</view>

				<view class="wrap-file">
					<swiper circular autoplay>
						<block v-for="(item, index) in dataInfo.banner" :key="index">
							<swiper-item>
								<block v-if="item.mime.split('/')[0] === 'video'">
									<video class="img" :src="getImageURL(item.url)" :poster="getImageURL(item.cover)"></video>
								</block>
								<block v-else>
									<image class="img" :src="getImageURL(item.url)" />
								</block>
							</swiper-item>
						</block>
					</swiper>

					<view class="time-bg">
						<view class="time"> 比赛时间:{{ dataInfo.competitionTime.join("~") }} </view>
					</view>
				</view>

				<view class="wrap-time-bg">
					<view class="one-item"> 赛事地点:{{ dataInfo.address }} </view>
					<view class="one-item"> 赛事时间:{{ dataInfo.competitionTime.join("~") }} </view>
					<view class="one-item"> 报名时间:{{ dataInfo.applyTime.join("-") }} </view>
					<view class="one-item"> 报名人数:{{ dataInfo.num || 0 }} </view>
				</view>
			</view>
			
			<view class="wrap-content">
				<view class="title">赛事详情</view>
				
				<view class="content">
					<uParse :html="$filters.handleHTMLData(dataInfo.content)" />
				</view>
			</view>
		</view>

		<view class="footer safe-area">
			<view class="left">
				<button class="item" hover-class="none" @click.stop="onBack">
					<image src="/static/images/detail_home.png" />
					<view> 返回首页 </view>
				</button>

				<button class="item" hover-class="none" @click.stop="onCheck">
					<image src="/static/images/detail_bmcx.png" />
					<view> 报名查询 </view>
				</button>

				<button class="item" hover-class="none" @click.stop="onZX">
					<image src="/static/images/detail_bmzx.png" />
					<view> 报名咨询 </view>
				</button>
			</view>

			<view class="btn" v-if="$filters.isCanApply(dataInfo)" @click.stop="onEnroll"> 开始报名 </view>
			<view class="btn bbttnn" v-else> 已报名 </view>
		</view>
	
		<view class="pop" v-if="isShow" @click.stop="isShow = false" @touchmove.stop.prevent>
			<view class="pop-white" @click.stop.prevent>
				<image class="code" :src="getImageURL(codeImg)" @longpress="onSaveImage"></image>
			</view>
		</view>
	</div>
</template>

<script>
	import {
		getEventDetails
	} from "@/utils/api.js";
	import uParse from "@/components/uParse/uParse.vue";
	export default {
		components: {
			uParse
		},
		data() {
			return {
				competitionID: "", // 赛事ID
				dataInfo: null, // 赛事详情数据
				competitionNoQuery: "", //报名查询
				codeImg:"", //二维码图片
				isShow: false, //
			};
		},
		onLoad(options) {
			this.competitionID = options.id;
			this.$filters.getConfig((data) => {
				this.competitionNoQuery = data.competitionNoQuery;
				this.codeImg = data.businessContactCode;
			});
			this.getData();
		},
		methods: {
			/**
			 * 返回首页
			 */
			onBack() {
				uni.navigateBack()
			},
			/**
			 * 查询
			 */
			onCheck() {
				uni.navigateTo({
					url: "/pages/check/encoll"
				})
			},
			/**
			 * 咨询
			 */
			onZX() {
				this.isShow = true;
			},
			/**
			 * 开始报名
			 */
			onEnroll() {
				uni.navigateTo({
					url: `/pages/registration/enroll?id=${this.competitionID}&applyType=${this.dataInfo.applyType}&hasGrApply=${this.dataInfo.hasGrApply}&hasTtApply=${this.dataInfo.hasTtApply}`
				})
			},
			/**
			 * 保存图片
			 */
			onSaveImage() {
				uni.downloadFile({
					url: this.getImageURL(this.codeImg),
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								this.$st.success("图片保存成功")
							}
						})
					},
					fail: res => {
						console.log("失败", res);
					}
				})
			},
			/**
			 * 网络请求
			 */
			getData() {
				getEventDetails(this.competitionID).then((res) => {
					this.dataInfo = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}

	.wrap {
		--bottom-height: 130rpx;
		width: 100%;
		overflow: hidden;

		.wrap-info {
			width: 100%;
			overflow: hidden;
			background-color: white;

			.wrap-title {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 1;
			}

			.wrap-file {
				width: 100%;
				height: 500rpx;
				overflow: hidden;
				position: relative;
				z-index: 1;

				swiper,
				swiper-item {
					width: 100%;
					height: 100%;
				}

				.img {
					width: 100%;
					height: 500rpx;
					overflow: hidden;
				}

				.time-bg {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 156rpx;
					z-index: 2;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					background-image: url("/static/images/detail_time_bg.png");

					.time {
						position: absolute;
						left: 30rpx;
						bottom: 30rpx;
						color: white;
						font-size: 28rpx;
						z-index: 3;
						line-height: 1;
					}
				}
			}

			.wrap-time-bg {
				width: 100%;
				overflow: hidden;
				background-color: white;
				padding: 30rpx;
				box-sizing: border-box;

				.one-item {
					width: 100%;
					display: flex;
					align-items: center;
					overflow: hidden;
					margin-bottom: 20rpx;
					color: #666666;
					font-size: 26rpx;
					line-height: 1;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		.wrap-content {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			background-color: white;
			.title {
				width: 100%;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				color: #EA5520;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom: 2rpx solid #E5E5E5;
			}
			
			.content {
				width: 100%;
				overflow: hidden;
				
				padding: 30rpx;
				box-sizing: border-box;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 116rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		z-index: 10;

		.left {
			margin-left: 20rpx;
			margin-right: 20rpx;
			flex: 1;
			height: 100%;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;

			.item {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border: none;
				padding: 0rpx !important;
				margin: 0rpx !important;
				background: transparent;

				>image {
					width: 44rpx;
					height: 44rpx;
				}

				>view {
					margin-top: 10rpx;
					color: #333333;
					font-size: 22rpx;
					line-height: 1;
				}
			}
		}

		.btn {
			width: 248rpx;
			height: 80rpx;
			background-color: #ea5520;
			border-radius: 40rpx;
			overflow: hidden;
			line-height: 80rpx;
			text-align: center;
			color: white;
			font-size: 32rpx;
			margin-right: 20rpx;
		}
	}

	button::after {
		border: none;
	}
	
	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.pop-white {
			overflow: hidden;
			
			.code {
				width: 400rpx;
				height: 400rpx;
			}
		}
	}
</style>